@use "sass:math";

html,
body,
#app {
	height: 100%;
	font-size: 12px;
	line-height: 1.2;
	color: #303133;
	margin: 0;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

form.c-form-text,
div.c-form-text {
	.el-form-item {
		margin-bottom: 6px;

		.el-form-item__label {
			color: #99a9bf;
		}

		.el-form-item__content {
			border-bottom: 1px solid #E4E7ED;
		}
	}

}

.c-form-text-item.el-form-item {
	.el-form-item__label {
		color: #99a9bf;
	}

	.el-form-item__content {
		border-bottom: 1px solid #E4E7ED;
	}
}

form.c-form-text,
div.c-form-text .el-form-item {
	.no-border {
		.el-form-item__content {
			border-bottom: 0px;
		}
	}

}

.c-form-condensed.el-form .el-form-item {
	margin-bottom: 3px;

	.el-input {
		max-width: 150px;
	}
}

.c-form-small .el-form-item {
	margin-bottom: 0px;
}

.c-form-mini .el-form-item {
	margin-bottom: 14px;
}

.c-link {
	cursor: pointer;
	text-decoration: underline;
	color: #409EFF
}

.c-link.no-line {
	text-decoration: none;
}

.c-dialog-small.el-dialog__wrapper {
	.el-dialog__body {
		padding: 15px 20px;
	}
}

.el-radio-no-label {
	.el-radio__label {
		padding-left: 0;
	}
}

.c-dialog-fixed.el-dialog {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	border-radius: 0px;
	margin: 0 auto !important;
	padding: 0px;

	.el-dialog__header {
		z-index: 1;
		background-color: #409EFF;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 16px;
		//border-bottom: 1px solid #E4E7ED;
		/*border-bottom :1px solid #EBEEF5;*/
		box-shadow: 0px 0px 4px rgba(0, 0, 0, .4);

		.el-dialog__title {
			color: #fff;
			font-size: 14px;
		}

		.el-dialog__headerbtn {
			.el-dialog__close.el-icon {
				color: #fff;
			}
		}

	}

	.el-dialog__body {
		padding: 10px 16px;
		flex: auto;
		overflow: auto;

		>* {
			margin-bottom: 20px
		}
	}

	.el-dialog__footer {
		z-index: 0;
		border-top: 1px solid #E4E7ED;
		padding: 8px;
	}
}


.c-center.c-dialog-fixed.el-dialog__wrapper {
	justify-content: center;
}

.c-right-fixed.c-dialog-fixed.el-dialog__wrapper {
	.el-dialog {
		margin: 0px 0px 0px auto !important;
		height: 100%;
	}
}

.c-hide-header.c-dialog-fixed.el-dialog__wrapper .el-dialog__header {
	display: none;
}

.c-input-readonly input,
.c-input-readonly textarea {
	background-color: #F2F6FC;
	color: #909399;
	border-color: #e4e7ed;
}

.c-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;

	td,
	th {
		border: 1px solid #000;
		padding: 2px 6px;
	}

	.label {
		white-space: nowrap;
		text-align: center;
	}
}

@media print {

	body,
	#app {
		overflow: auto !important;
	}

	.no-print {
		display: none;
	}

	.c-print-dialog::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		opacity: 1;
	}

	.c-print-dialog.c-dialog-fixed {
		position: absolute;
		bottom: inherit;
		flex-wrap: wrap;
		display: block;
		min-height: 100%;
		margin: 0px auto;
		background-color: #fff;

		.el-dialog {
			box-shadow: none;
			flex-wrap: wrap;
			display: block;
			width: 100% !important;

			/*min-height: 100%;*/
			.el-dialog__header,
			.el-dialog__footer {
				display: none;
			}

			.el-dialog__body {
				padding: 0px !important;
			}
		}
	}
}

.c-text-indent {
	text-indent: 2em;
}

.c-text-center {
	text-align: center;
}

.c-tips {
	padding: 0px 5px;
	font-size: 12px;
	color: #909399;
}

.c-query-form.el-form {
	.el-form-item {
		margin-bottom: 3px;

		.el-form-item__label {
			font-size: 12px;
		}

		.el-form-item__content {
			font-size: 12px;

			.el-input {
				max-width: 140px;
			}

			.el-checkbox__label {
				font-size: 12px;
			}
		}
	}
}

.c-query-form .c-remove-max-width .el-input {
	max-width: none !important;
}



/*
	css样式名说明
	固定以c开头，然后加主要的样式名，最后面加上尺寸，以-为分隔符

	下面对样式的尺寸的进行说明：
	数字+单位：c-pd-10p
	尺寸单位p，代表px单位，比如c-pd-10p，代表padding: 10px
	尺寸单位r，代表rpx单位，比如 c-pd-10r，代表padding: 10rpx
	尺寸单位pe，代表%单位，比如c-pd-10pe，代表padding: 10%

	纯数字：c-text-grey-1
	代表n级，比如c-text-grey-1为一级灰色文字，一般级越大，颜色越深，尺寸越大

	尺寸:c-font-xs
	xs:特小
	sm:小
	无:正常
	md:偏大
	lg:大号
	xl:特大号
*/

$c-color-primary: #409EFF;
$c-color-success: #67C23A;
$c-color-warning: #E6A23C;
$c-color-danger: #F56C6C;
$c-color-info: #909399;

$c-text-color: #333;
$c-text-color-grey: #999;
$c-text-color-placeholder: #C0C4CC;
$c-bg-color: #F4F5F6;
$c-bg-color-hover: #f1f1f1;
$c-bg-color-grey: #f8f8f8;
$c-border-color: #E4E7ED;

@for $i from 6 through 20 {
	.c-font-#{$i*2}p {
		font-size: $i*2px;
	}
}

/* 标题 */
.c-title {

	&-xl,
	&-1 {
		font-size: 14px;
		font-weight: bold;
	}

	&-sm,
	&-2 {
		font-size: 18px;
		font-weight: bold;
	}

	&,
	&-3 {
		font-size: 24px;
		font-weight: bold;
	}

	&-md,
	&-4 {
		font-size: 32px;
		font-weight: bold;
	}

	&-lg,
	&-5 {
		font-size: 42px;
		font-weight: bold;
	}

	&-xl,
	&-6 {
		font-size: 54px;
		font-weight: bold;
	}
}

.c-text {

	//不换行，强制在同一行显示
	&-nowrap {
		white-space: nowrap;
	}

	//粗体文字
	&-bold {
		font-weight: bold;
	}

	//文字居中
	&-center {
		text-align: center;
	}

	//文字居右
	&-right {
		text-align: right;
	}

	&-left {
		text-align: left;
	}

	//缩进2字符
	&-indent {
		text-indent: 2em;
	}

	&-white {
		color: #ffffff;
	}

	&-primary {
		color: $c-color-primary;
	}

	&-success {
		color: $c-color-success;
	}

	&-warning {
		color: $c-color-warning;
	}

	&-info {
		color: $c-color-info;
	}

	&-danger,
	&-error {
		color: $c-color-danger;
	}

	&-placeholder {
		color: $c-text-color-placeholder;
	}

	&-grey {
		color: $c-text-color-grey;

		&-1 {
			color: #c0c4cc;
		}

		&-2 {
			color: #909399;
		}

		&-3 {
			color: #606266;
		}

		&-4 {
			color: #303133;
		}
	}
}

//边框
.c-border {

	&,
	&-t,
	&-b,
	&-l,
	&-r {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			pointer-events: none;
			left: 0;
			top: 0;
			width: 199.8%;
			height: 199.7%;
			border: 0px solid $c-border-color;
			transform-origin: 0 0;
			transform: scale(0.5);
			box-sizing: border-box;
			z-index: 2;
		}
	}

	&-tb::after,
	&-t::after {
		border-top-width: 1px;
	}

	&-tb::after,
	&-b::after {
		border-bottom-width: 1px;
	}

	&-lr::after,
	&-l::after {
		border-left-width: 1px;
	}

	&-lr::after,
	&-r::after {
		border-right-width: 1px;
	}
}

.c-flex {
	display: flex;

	&-wrap {
		flex-wrap: wrap;
	}

	&-main {
		&-center {
			justify-content: center;
		}

		&-end {
			justify-content: flex-end;
		}

		&-space-between {
			justify-content: space-between;
		}
	}

	&-cross {
		&-center {
			align-items: center;
		}
	}

	&-align-main-center {
		justify-content: center;
	}

	&-row {
		flex-direction: row;

		//水平方向对齐居中
		&-center {
			justify-content: center;
		}

		&-end {
			justify-content: flex-end;
		}

		&-space-between {
			justify-content: space-between;
		}
	}

	&-column {
		flex-direction: column;

		&-end {
			align-items: flex-end;
		}
	}

	&-item {
		&-auto {
			flex: auto;
		}

		&-1 {
			flex: 1;
		}

		&-2 {
			flex: 2;
		}

		&-3 {
			flex: 3;
		}

		&-90p {
			flex-basis: 90px;
		}

		&-label {
			flex: 0 0 90px;
			white-space: nowrap;
			padding-right: 10px;
		}

		&-value {
			flex: 1;
			color: $c-text-color-grey;
			text-align: right;
		}

		&-field {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
}

.c-fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.c-cell {
	@extend .c-border-b;
	background-color: #ffffff;
	line-height: 1.8;
	padding: 13px 16px;
	position: relative;

	&.c-short-border::after,
	.c-short-border &::after {
		left: 12px;
	}

	&.c-full-border::after,
	&:last-child::after {
		left: 0;
	}

	&.c-no-border::after,
	.c-no-border &::after {
		height: 0;
	}

	&-line {
		&-primary {
			position: relative;

			&::before {
				content: "";
				width: 4px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: -10rpx;
				background-color: $c-color-primary;
				border-radius: 5000px;
			}
		}
	}

	&-group {
		@extend .c-border-t;
	}
}

.c-bg {

	&-hover,
	.c-clickable:active {
		background-color: $c-bg-color-hover;
	}

	&-white {
		background-color: #ffffff;
	}

	&-primary {
		background-color: $c-color-primary;
	}

	&-success {
		background-color: $c-color-success;
	}

	&-warning {
		background-color: $c-color-warning;
	}

	&-danger,
	&-error {
		background-color: $c-color-danger;
	}

	&-info {
		background-color: $c-color-info;
	}

	&-grey {
		background-color: $c-bg-color-grey;
	}
}

.c-divider {
	display: flex;
	align-items: center;
	min-height: 24px;
	color: #C0C4CC;

	&::before,
	&::after {
		flex: 1;
		content: "";
		height: 1px;
		background-color: #C0C4CC;
		transform: scaleY(.5);
	}

	&::before {
		margin-right: 10px;
	}

	&::after {
		margin-left: 10px;
	}

	&:empty {

		&::before,
		&::after {
			margin: 0;
		}
	}
}

.c-row {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;

	>div {
		box-sizing: border-box;
	}

	@for $i from 1 through 24 {
		.c-col-#{$i} {
			width: math.div($i, 24)*100%;
		}
	}
}


@for $i from 1 through 20 {
	$temp: $i*5;

	.c-h-#{$temp}p {
		height:#{$temp}px;
	}

	.c-w-#{$temp}p {
		width:#{$temp}px;
	}

	.c-pd-#{$temp}p {
		padding:#{$temp}px;
	}

	.c-pd-l-#{$temp}p {
		padding-left:#{$temp}px;
	}

	.c-pd-r-#{$temp}p {
		padding-right:#{$temp}px;
	}

	.c-pd-t-#{$temp}p {
		padding-top:#{$temp}px;
	}

	.c-pd-b-#{$temp}p {
		padding-bottom:#{$temp}px;
	}

	.c-pd-lr-#{$temp}p {
		padding-left:#{$temp}px;
		padding-right:#{$temp}px;
	}

	.c-pd-tb-#{$temp}p {
		padding-top:#{$temp}px;
		padding-bottom:#{$temp}px;
	}

	.c-mg-#{$temp}p {
		margin:#{$temp}px;
	}

	.c-mg-l-#{$temp}p {
		margin-left:#{$temp}px;
	}

	.c-mg-r-#{$temp}p {
		margin-right:#{$temp}px;
	}

	.c-mg-t-#{$temp}p {
		margin-top:#{$temp}px;
	}

	.c-mg-b-#{$temp}p {
		margin-bottom:#{$temp}px;
	}

	.c-mg-lr-#{$temp}p {
		margin-left:#{$temp}px;
		margin-right:#{$temp}px;
	}

	.c-mg-tb-#{$temp}p {
		margin-top:#{$temp}px;
		margin-bottom:#{$temp}px;
	}

	.c-gap-#{$temp}p {
		gap:#{$temp}px;
	}

	.c-flex-gutter-#{$temp}p>div {
		margin-right: #{$temp}px;
	}

	.c-flex-gutter-#{$temp}p>div :last-child {
		margin-right: 0px;
	}

	.c-col-gutter-#{$temp}p {
		margin-right: -#{$temp}px;

		>div {
			margin-right:#{$temp}px;
		}

		@for $i2 from 1 through 24 {
			.c-col-#{$i2} {
				width: calc(#{math.div($i2,24)*100%} - #{$temp}px);
			}
		}
	}

	.c-row-gutter-#{$temp}p {
		margin-bottom:-#{$temp}px;

		>div {
			margin-bottom:#{$temp}px;
		}
	}

	.c-vertical-gutter-#{$temp}p {
		>div+div {
			margin-top:#{$temp}px;
			;
		}
	}

	.c-horizontal-gutter-#{$temp}p {
		>div+div {
			margin-left:#{$temp}px;
			;
		}
	}
}

.c-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.c-ellipsis-2l {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.c-ellipsis-3l {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.c-tag {
	font-size: 14px;
	padding: 0 5px;
	background-color: $c-bg-color-grey;
	border-radius: 4px;

	display: inline;

	&-xs {
		font-size: 12px
	}

	&-sm {
		font-size: 13px
	}

	&-md {
		font-size: 16px;
	}

	&-lg {
		font-size: 18px;
	}

	&-xl {
		font-size: 20px;
	}

	&-primary {
		background-color: $c-color-primary;
		color: #FFFFFF;
	}

	&-success {
		background-color: $c-color-success;
		color: #FFFFFF;
	}

	&-danger {
		background-color: $c-color-danger;
		color: #FFFFFF;
	}

	&-warning {
		background-color: $c-color-warning;
		color: #FFFFFF;
	}

	&-info {
		background-color: $c-color-info;
		color: #FFFFFF;
	}
}